<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo">
                <el-form-item label="部门名称">
                    <el-input
                            v-model="searchInfo.station_name"
                            placeholder="请输入部门名称"
                            clearable
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchInfo.status" clearable placeholder="请选择部门状态">
                        <el-option
                                v-for="dict in statusOptions"
                                :key="dict.item_value"
                                :label="dict.item_name"
                                :value="dict.item_value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="filter-item"
                            type="primary"
                            icon="el-icon-search"
                            @click="handleQuery"
                    >搜索</el-button>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item>
                    <el-button
                            class="filter-item"
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            @click="createSysStation()"
                    >新增岗位</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table
                :data="tableData"
                row-key="ID"
                default-expand-all
                border
        >
            <el-table-column label="ID" width="50" prop="ID">
                <template slot-scope="scope">{{scope.row.ID}}</template>
            </el-table-column>
            <el-table-column prop="station_code" label="岗位编码" width="120" />
            <el-table-column prop="station_name" label="岗位名称" width="130"/>
            <el-table-column prop="department.dept_name" label="部门名称" width="130"/>
            <el-table-column prop="company.company_name" label="公司名称" width="180" />
            <el-table-column prop="status" label="状态" width="60">
                <template slot-scope="scope">{{scope.row.status|basecode(scope.row.status,'sys_common_status')}}</template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" width="200"></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createdAt" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.CreatedAt|formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            @click="updateSysStation(scope.row)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                    >编辑</el-button>
                    <el-button @click="deleteSysStation(scope.row)" type="danger" icon="el-icon-delete" style="margin-left: 6px;" size="mini" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <el-dialog :before-close="handleClose" :title="dialogTitle" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="formData" :rules="rules" size="medium" label-width="110px" ref="elForm" >
                <el-form-item label="岗位编码" prop="dept_code">
                    <el-input  v-model="formData.station_code" placeholder="请输入岗位编码" :style="{width: '90%'}"></el-input>
                </el-form-item>
                <el-form-item label="岗位名称" prop="station_name">
                    <el-input  v-model="formData.station_name"  placeholder="请输入岗位名称" :style="{width: '90%'}"></el-input>
                </el-form-item>
                <el-form-item label="公司" prop="company_code">
                    <el-select  placeholder="请选择公司" v-model="formData.company_code" @change="selectCompany" >
                        <el-option
                                v-for="(item, i) in companyOptions"
                                :key="i"
                                :label="item.company_name"
                                :value="item.company_code"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门" prop="dept_code">
                    <el-select  placeholder="请选择部门" v-model="formData.dept_code" >
                        <el-option
                                v-for="(item, i) in deptOptions"
                                :key="i"
                                :label="item.dept_name"
                                :value="item.dept_code"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio
                                v-for="dict in statusOptions"
                                :key="dict.item_value"
                                :label="dict.item_value |formatBoolean"
                        >{{ dict.item_name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input autocomplete="off" v-model="formData.remark" placeholder="请输入备注"  type="textarea" :style="{width: '90%'}"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button @click="enterDialog" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getStationList,
        createStation,
        deleteStation,
        updateStation
    } from "@/api/station";
    import {getDepartmentByCode} from "@/api/department"
    import { getCompany } from "@/api/company";
    import { formatTimeToStr } from '@/utils/date'
    import infoList from '@/mixins/infoList'
    export default {
        name: "station",
        mixins: [infoList],
        data() {
            return {
                listApi: getStationList,
                dialogFormVisible: false,
                companyOptions: [],
                deptOptions: [],
                statusOptions:[],
                dialogTitle: '新增岗位',
                type: '',   // 弹出dialog框类型 add/edit
                searchInfo: {
                    station_name: undefined,
                    status: undefined
                },
                formData: {
                    station_code: '',
                    station_name: '',
                    status: true,
                    remark: '',   // 描述信息
                    company_code: '',
                    dept_code: ''
                },
                rules: {
                    station_code: [{ pattern: /^[0-9]*$/, message: "请输入部门编号 为数字", trigger: "blur" }],
                    dept_name: [{ required: true, message: "请输入部门名字", trigger: "blur" }],
                    remark: [
                        { required: true, message: "请输入备注信息", trigger: "blur" }
                    ],
                },


            }
        },
        methods: {
            handleQuery() {
                if (this.searchInfo.status==""){
                    this.searchInfo.status=null
                }
                this.getTableData()
            },
            handleClose(done) {
                // this.initForm();
                done();
            },
            async updateSysStation(row) {
                this.type = "update";
                this.formData = row;
                this.dialogFormVisible = true;
                this.dialogTitle = '编辑岗位';
                getCompany().then(response => {
                    this.companyOptions = response.data.companyList;
                });
                if (this.formData.company_code){
                    this.selectCompany(this.formData.company_code)
                }
            },
            async selectCompany(val){
                this.company_code = val
                getDepartmentByCode({
                    'CompanyCode': val
                }).then(response => {
                    this.deptOptions = response.data.deptList
                })
            },
            async createSysStation(){
                this.dialogTitle = '新增岗位'
                this.type = 'create';
                this.initForm();
                getCompany().then(response => {
                    this.companyOptions = response.data.companyList;
                })
                this.dialogFormVisible = true;
            },
            initForm() {
                this.formData = {
                    station_code: '',
                    station_name: '',
                    status: true,
                    remark: '',   // 描述信息
                    company_code: '',
                    dept_code: ''
                };
            },
            closeDialog() {
                // this.initForm();
                this.dialogFormVisible = false;
            },
            // 删除角色
            deleteSysStation(row) {
                this.$confirm("此操作将永久删除该岗位, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(async () => {
                        this.visible = false;
                        const res = await deleteStation({ ID: row.ID });
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            await  this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            async enterDialog() {
                this.$refs['elForm'].validate(async valid => {
                    if (!valid) return
                    let res;
                    switch (this.type) {
                        case "create":
                            res = await createStation(this.formData);
                            break;
                        case "update":
                            res = await updateStation(this.formData);
                            break;
                        default:
                            res = await createStation(this.formData);
                            break;
                    }
                    if (res.code == 0) {
                        this.closeDialog();
                        await this.getTableData();
                    }
                })
            },
        },
        filters: {
            formatDate: function(time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                } else {
                    return "";
                }
            },
            formatBoolean: function(s) {
                if (s == "1" ) {
                    return true
                } else {
                    return false;
                }
            }
        },
        async created() {
            await this.getTableData();
            this.statusOptions = this.getDicItemList('sys_common_status')

        }
    }
</script>

<style scoped lang="scss" >

    .warning {
        color: #dc143c;
    }

</style>

